<template>
  <div class="profile-container">
    <!-- 用户信息卡片 -->
    <el-card class="user-info-card" shadow="never">
      <div class="user-info">
        <el-avatar :src="userProfile.avatar && userProfile.avatar.trim() !== '' ? userProfile.avatar : store.getters.avatar" size="large" class="large-avatar"></el-avatar>
        <div class="user-details">
          <h3 class="large-username">{{ userProfile.nickName }}</h3>
          <p><i class="el-icon-user-solid"></i> {{ userProfile.dept.deptName }}</p>
          <p><i class="el-icon-s-custom"></i> 工号：{{ userProfile.userId }}</p>
        </div>
      </div>
    </el-card>

    <!-- 项目列表 -->
    <el-card class="projects-card" shadow="never">
      <div slot="header" class="card-header">
        <span><i class="el-icon-menu"></i> 项目列表</span>
      </div>
      <el-table :data="userProjects" stripe style="width: 100%">
        <el-table-column label="序号" width="80">
          <template slot-scope="scope">
            {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="项目名称"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status) === '已完成' ? 'success' : 'info'">
              {{ getStatusType(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="{ row }">
            <el-link type="primary" @click="handleDetails(row)">详情</el-link>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total >= 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getUserProjects"
      />
    </el-card>
  </div>
</template>
<script>
import { getProbeProjectByUserId } from '@/api/system/probeProject';
import { getUser } from '@/api/system/user';
import store from "@/store";
export default {
  computed: {
    store() {
      return store
    }
  },
  data() {
    return {
      id: null,// 用户id
      userProfile: {},// 用户资料
      userProjects: [],// 用户项目
      total: 0, // 总条目数
      queryParams: {
        pageNum: 1, // 当前页码
        pageSize: 10 // 每页条数
      },
    };
  },
  created() {
    const id = this.$route.query.id;
    console.log('id', id)
    if(id != null) {
      this.id = id;
      this.getUserProfile();
      this.getUserProjects();
    }
  },
  methods: {
    getStatusType(status) {
      const statusMap = ['设计', '校对', '审定', '已完成'];
      return statusMap[status] || '';
    },
    handleDetails(row) {
      this.$router.push({ name: 'ProbeProjectDetail', query: { id: row.id } });
    },
    getUserProfile() {
      getUser(this.id).then(response => {
        this.userProfile = response.data;
        console.log('this.userProfile', this.userProfile)
      });
    },
    getUserProjects() {
      getProbeProjectByUserId(this.id).then(response => {
        this.userProjects = response.data.rows;
        this.total = response.data.total;
        console.log('this.userProjects', this.userProjects)
      });
    }
  }
};
</script>

<style scoped>
.profile-container {
  padding: 20px;
}

.user-info-card {
  background-color: #e6f7ff;
  margin-bottom: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 20px;
}

.user-details {
  margin-left: 20px;
}

.projects-card {
  min-height: 400px;
}

.card-header {
  font-weight: bold;
}
.large-avatar {
  width: 100px;
  height: 100px;
}

.large-username {
  font-size: 24px;
  font-weight: bold;
}
</style>
